<template>
  <main class="bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
    <div class="w-full max-w-md px-6 py-8">
      <!-- Logo -->
      <div class="flex justify-center mb-8">
        <router-link class="block" to="/">
          <svg width="48" height="48" viewBox="0 0 32 32">
            <defs>
              <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
                <stop stop-color="#B7ACFF" stop-opacity="0" offset="0%" />
                <stop stop-color="#B7ACFF" offset="100%" />
              </linearGradient>
              <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
                <stop stop-color="#7BC8FF" stop-opacity="0" offset="0%" />
                <stop stop-color="#7BC8FF" offset="100%" />
              </linearGradient>
            </defs>
            <rect fill="#8470FF" width="32" height="32" rx="16" />
            <path
              d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z"
              fill="#755FF8" />
            <path
              d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z"
              fill="url(#logo-a)" />
            <path
              d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z"
              fill="url(#logo-b)" />
          </svg>
        </router-link>
      </div>

      <!-- Title -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Welcome back!</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">请登录您的账户</p>
      </div>

      <!-- Form -->
      <form @submit.prevent="onSubmit" class="space-y-6">
        <div>
          <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="username">用户名</label>
          <input 
            id="username" 
            v-model="username" 
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white" 
            type="text" 
            autocomplete="username"
            placeholder="请输入用户名" 
          />
        </div>
        <div>
          <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">密码</label>
          <input 
            id="password" 
            v-model="password" 
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white" 
            type="password" 
            autocomplete="current-password"
            placeholder="请输入密码" 
          />
        </div>
        
        <p v-if="errorMessage" class="text-sm text-red-600 text-center">{{ errorMessage }}</p>
        
        <button 
          type="submit"
          class="w-full py-2 px-4 bg-violet-600 hover:bg-violet-700 text-white font-medium rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
          :disabled="loading"
        >
          <span v-if="loading">登录中...</span>
          <span v-else>登录</span>
        </button>
      </form>

      <!-- Footer -->
      <div class="mt-8 text-center">
        <div class="text-sm text-gray-600 dark:text-gray-400">
          还没有账户？ 
          <router-link class="font-medium text-violet-600 hover:text-violet-500 dark:text-violet-400" to="/signup">
            立即注册
          </router-link>
        </div>
        <div class="mt-4">
          <router-link class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" to="/reset-password">
            忘记密码？
          </router-link>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { authApi } from '../api/authService'

defineOptions({ name: 'Signin' })

const router = useRouter()
const username = ref('')
const password = ref('')
const loading = ref(false)
const errorMessage = ref('')

const onSubmit = async () => {
  errorMessage.value = ''
  if (!username.value || !password.value) {
    errorMessage.value = '请输入用户名和密码'
    return
  }
  loading.value = true
  try {
    const res = await authApi.login(username.value, password.value)
    // 设置 token 已在 authApi.login 的会话保存中处理；这里确保 token 设置
    authApi.setToken(res.access_token)
    // 可选：校验一次
    await authApi.verifyToken().catch(() => {})
    router.push('/')
  } catch (e: any) {
    errorMessage.value = e?.response?.data?.detail || '登录失败，请检查用户名或密码'
  } finally {
    loading.value = false
  }
}
</script>